<template>
	<view>
		<view class="header">
			<view  class="searchStyle">
				<input type="text" maxlength="10" v-model="searchText" placeholder="请输入关键字" />
				<image src="../../static/img/teacherDetails/search.png"></image>
				<text class="searchBtn" @click="searchHandle">搜索</text>
			</view>
		</view>
		<view class="line10"></view>
		<u-empty text="列表为空" mode="list" :show="listShow"></u-empty>
		<!-- 教练详情 -->
		<view class="list" v-show="!listShow">
			<view v-for="(item, index) in teachersList" :key="index" @click="onNavigateTo('/pages/teacherSubscribe/teacherDetail?id=' + item.id)">
				<view class="teachersDetails">
					<view class="teacherImg"><image :src="item.image" mode=""></image></view>
					<view class="introduce">
						<view class="teacherName">
							<text>{{ item.name }}</text>
							<text>{{ item.drive_age ? '驾龄' + item.drive_age + '年' : '' }}</text>
						</view>
						<uni-rate size="20" disabled="true" :value="item.star"></uni-rate>
						<view class="skillList">
							<text class="characteristic" v-for="(ele, index1) in item.tags" :key="index1">{{ ele }}</text>
						</view>
					</view>
					<view @click.stop="onNavigateTo('/pages/teacherSubscribe/teacherSubscribe?teacher='+JSON.stringify(item))" class="immediately">立即预约</view>
				</view>
			</view>
		</view>
		<view v-show="loadingShow" class="loading">{{loadingText}}</view>
	</view>
</template>

<script>
import { lists } from '@/api/user/teacherList/teacherList.js';
export default {
	data() {
		return {
			teachersList: [],
			searchText: '',
			listShow: false,
			page:1,
			loadingText: '加载中...', //加载状态
			loadingShow:true,
			type:1
		};
	},
	async onLoad(options) {
		this.type=++options.type || 2
		let res = await lists('',1,this.type);
		this.teacherListHandle(res);
	},
	watch: {
		teachersList(val) {
			if(!val.length){
				this.listShow=true
			}else{
				this.listShow=false
			}
		}
	},
	onReachBottom() {
		this.loadMore()
	},
	methods: {
		onNavigateTo(url) {
			uni.navigateTo({
				url: url
			});
		},
		async searchHandle() {
			this.page=1
			let res = await lists(this.searchText,1,this.type);
			this.teacherListHandle(res);
		},
		async loadMore(){
			let res = await lists(this.searchText,++this.page,this.type);
			this.teacherListHandle(res)
		},
		teacherListHandle(res) {
			if (res.data.coach.data.length == 0) {
				this.loadingText = "没有数据了！";
			} else if (res.data.coach.data.length < 10) {
				this.loadingText = "没有数据了！";
			} else {
				this.loadingText = "加载中";
			}
			for (let i = 0; i < res.data.coach.data.length; i++) {
				res.data.coach.data[i].tags = res.data.coach.data[i].tags.split(',');
			}
			if (this.page == 1) {
				this.teachersList = res.data.coach.data;
			} else {
				this.teachersList = this.teachersList.concat(res.data.coach.data)
			}
			if(this.teachersList.length>0){
				this.loadingShow=true
			}else{
				this.loadingShow=false
			}
		}
	}
};
</script>

<style lang="scss">
@import './css/searchTeacher.scss';
</style>
